<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>岗位表</title>
    <style>


    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box">
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-form :inline="true" :model="searchCondition">
                    <el-form-item label="主键"  >
                        <el-input v-model="searchCondition.id" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="岗位编号"  >
                        <el-input v-model="searchCondition.code" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="岗位名称"  >
                        <el-input v-model="searchCondition.name" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="岗位类型" v-if="moreConditionFlag" >
                        <el-select v-model="searchCondition.type">
                            <el-option v-for="option in typeOptions"
                                       :value="option.key"
                                       :label="option.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间" v-if="moreConditionFlag" >
                        <el-date-picker v-model="searchCondition.createTime" type="date" ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="修改时间" v-if="moreConditionFlag" >
                        <el-date-picker v-model="searchCondition.updateTime" type="date" ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="创建人id" v-if="moreConditionFlag" >
                        <el-checkbox-group v-model="searchCondition.createUserId">
                            <el-checkbox v-for="option in createUserIdOptions" :label="option.id">{{option.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="更新人id" v-if="moreConditionFlag" >
                        <el-input v-model="searchCondition.updateUserId" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" link @click="moreConditionFlag = true" v-if="!moreConditionFlag">更多条件</el-button>
                        <el-button type="primary" link @click="moreConditionFlag = false" v-if="moreConditionFlag">收起条件</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="list_search"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-button type="primary" @click="list_add" plain>新增</el-button>
                <el-button type="danger" @click="list_delete_batch" plain>批量删除</el-button>
                <el-button type="warning" @click="window.location.reload()" plain>刷新</el-button>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">{{defaultTableRadio}}
                <jo-el-table url="{URL_UMS}ums/umsPosition/getPage" :ref="joTableRef" :search-param="searchCondition" first-column="radio">
                    <template #default="scope">
                        <el-table :ref="tableRef" :data="scope.data" header-cell-class-name="jo-el-table-header"
                                  @sort-change="list_table_sort"
                        >
                            <el-table-column type="radio" width="50" fixed="left" header-align="center" align="center">
                                <template #default="scope2">
                                    <el-radio v-model="scope.radio.value" :label="scope2.$index"><span>{{scope2.$index}}</span></el-radio>
                                </template>
                            </el-table-column>
<!--                            <el-table-column prop="selection" label="#" type="selection" header-align="center"-->
<!--                                             align="center" width="50"></el-table-column>-->
                                <el-table-column prop="id" min-width="100" header-align="left" align="left" fixed="left" sortable="custom" >
                                    <template #header="scope"><span title="">主键</span></template>
                                </el-table-column>
                                <el-table-column prop="code" min-width="100" header-align="left" align="left" fixed="left"  >
                                    <template #header="scope"><span title="">岗位编号</span></template>
                                </el-table-column>
                                <el-table-column prop="name" min-width="100" header-align="left" align="left" fixed="right"  >
                                    <template #header="scope"><span title="提示">岗位名称</span></template>
                                </el-table-column>
                                <el-table-column prop="type" min-width="100" header-align="left" align="left"  sortable="custom" >
                                    <template #header="scope"><span title="">岗位类型</span></template>
                                </el-table-column>
                                <el-table-column prop="remark" min-width="100" header-align="left" align="left"   >
                                    <template #header="scope"><span title="">备注</span></template>
                                </el-table-column>
                                <el-table-column prop="createTime" min-width="100" header-align="left" align="left"  sortable="custom" >
                                    <template #header="scope"><span title="">创建时间</span></template>
                                </el-table-column>
                                <el-table-column label="操作" width="140" fixed="right">
                                    <template #default="scope">
                                        <el-button type="primary" link @click="list_edit(scope.row)">详情</el-button>
                                        <el-divider direction="vertical"></el-divider>
                                        <el-button type="danger" link @click="list_delete(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                        </el-table>
                    </template>
                </jo-el-table>
            </div>
        </el-col>
    </el-row>

    <el-dialog v-model="formShow" :title="formTitle" :width="formWidth">
        <el-form :ref="formRef" :model="formData" label-position="right" :rules="checkRules" label-width="100px">
            <el-row :gutter="15">
                <el-col :span="12">
                    <el-form-item label="岗位编号" prop="code">
                        <el-input v-model="formData.code" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="岗位名称" prop="name">
                        <el-input v-model="formData.name" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="岗位类型" prop="type">
                        <el-select v-model="formData.type" placeholder="">
                            <el-option v-for="option in typeOptions"
                                       :value="option.key"
                                       :label="option.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据顺序" prop="dataSequence">
                        <el-input-number v-model="formData.dataSequence" placeholder=""></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注" prop="remark">
                        <el-select v-model="formData.remark" placeholder="">
                            <el-option v-for="option in remarkOptions"
                                       :value="option.code"
                                       :label="option.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人id" prop="createUserId">
                        <el-checkbox-group v-model="formData.createUserId">
                            <el-checkbox v-for="option in createUserIdOptions" :label="option.id">{{option.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="删除标识" prop="trashFlag">
                        <el-radio-group v-model="formData.trashFlag">
                            <el-radio v-for="option in trashFlagOptions" :label="option.key">{{option.value}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close_form">取消</el-button>
                <el-button type="primary" @click="form_save">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <jo-el-data url="{URL_UMS}ums/umsPosition/getList" bind-root-name="remarkOptions"></jo-el-data>
    <jo-el-data url="{URL_UMS}ums/umsPosition/getList" bind-root-name="createUserIdOptions"></jo-el-data>

</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<!--<script src="/static/plugin/layer/layer.js"></script>-->
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<script type="text/javascript">

    const app = Vue.createApp(joEl.buildVueAppParam({
        data: function () {
            return {
                // 查询参数
                searchCondition: {},
                // 表单详情查询url
                formQueryUrl: '/ums/umsPosition/get',
                // 新增url
                formInsertUrl: '/ums/umsPosition/insert',
                // 修改url
                formUpdateUrl: '/ums/umsPosition/update',
                // 删除url
                deleteUrl: '/ums/umsPosition/delete',
                // 校验规则
                checkRules: {
                    code: [
                        joEl.rules.required('岗位编号不允许为空', 'blur'),
                        joEl.rules.length('岗位编号内容长度限制为1~128', 'blur', 128),
                    ],
                    name: [
                        joEl.rules.required('岗位名称不允许为空', 'blur'),
                        joEl.rules.length('岗位名称内容长度限制为1~128', 'blur', 128),
                    ],
                    type: [
                        joEl.rules.required('岗位类型不允许为空', 'blur'),
                        joEl.rules.notNaN('岗位类型请输入数字类型', 'blur'),
                    ],
                    dataSequence: [
                        joEl.rules.required('数据顺序不允许为空', 'blur'),
                        joEl.rules.notNaN('数据顺序请输入数字类型', 'blur'),
                    ],
                    remark: [
                        joEl.rules.length('备注内容长度限制为1~256', 'blur', 256),
                    ],
                    createUserId: [
                        joEl.rules.required('创建人id不允许为空', 'blur'),
                        joEl.rules.notNaN('创建人id请输入数字类型', 'blur'),
                    ],
                    trashFlag: [
                        joEl.rules.required('删除标识不允许为空', 'blur'),
                        joEl.rules.notNaN('删除标识请输入数字类型', 'blur'),
                    ],
                },
                typeOptions: [
                    {key: 1, value: '正职'},
                    {key: 2, value: '副职'},
                ],
                remarkOptions: [],
                createUserIdOptions: [],
                trashFlagOptions: [
                    {key: 1, value: '是'},
                    {key: 2, value: '否'},
                ],

            }
        }
        , computed: {}
        , methods: {
            // 新增表单数据初始化前的处理
            handle_form_init_data_add(data) {
            },
            // 编辑表单数据初始化前的处理
            handle_form_init_data_edit(data) {
            },
            tableSelectionSelect(){
                console.info(arguments);
                return false;
            }
        }
        , mounted() {

        }
        , setup() {

        }
    }, joEl.VUE_COMMON_VIEW, joEl.VUE_COMMON));
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
    app.use(joEl);

    var appVM = app.mount("#app");
</script>

</body>
</html>
